<!-- 我的钱包 -->
<template>
    <view class="my-wallet-box">
        <van-nav-bar title="会员中心" color="#fff" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #left>
                <van-icon name="arrow-left" color="#fff" />
            </template>
            <template #title>
                <view style="color:#fff">我的钱包</view>
            </template>
            <template #right>
                <view style="color:#fff">账单明细</view>
            </template>
        </van-nav-bar>
        <view class="my-wallet-head-main">
            <view class="my-wallet-head">
                <img src="@/assets/image/bg10.png" />
                <view class="wallet-price">
                    <img src="@/assets/image/icon25.png" alt="">
                    <text>{{ state.money }}</text>
                </view>
                <view class="my-wallet-head-bottom" @click="privateChatFn">
                    <!-- // 进入私聊 -->
                    <text>充值未到账，对金币余额有疑问，请联系客服</text><img src="@/assets/image/icon29.png" alt="">
                </view>
            </view>
            <!-- <uni-webview :src=></uni-webview> -->
            <view class="my-wallet-head-main-bottom">
                <SendOrderItem @update:topUpPrice="ev => state.topUpPrice = ev" />
                <PayOrderList @update:payWayType="ev => state.payWayType = ev" :isGold="true" />
            </view>
            <view class="pay-btn-bottom">
                <SendOrderAgreement />
                <!-- <PayOrder /> -->
                <van-button type="primary" :loading="state.isLoading" @click="confirmRecharge">确认充值</van-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, ref, nextTick } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import SendOrderItem from "@/pages/home/components/sendOrderItem/index.vue"
import SendOrderAgreement from "@/pages/home/components/sendOrderAgreement/index.vue"
import PayOrderList from "@/pages/home/components/payOrder/payOrderList/index.vue"

import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import {
    PayCurOrder
} from "@/api/person/index.js"
import { uni } from "@dcloudio/uni-h5"

let { proxy } = getCurrentInstance()

const state = reactive({
    scrollTop: 0,
    initScrollTop: 0,
    minimizedHeight: 0,
    minimized: false,
    topUpPrice: {}, // 充值明细
    payWayType: {}, // 支付类型
    money: 0,
    paymentResult: {
        contentMap: ""
    },
    isLoading:false
})

onLoad((options) => {
})

onMounted(() => {
    let userInfo = JSON.parse(getAuthorization("userInfo"))
    state.money = userInfo.Money
})

const onClickLeft = () => {
    history.back();
}
const onClickRight = () => {
    uni.navigateTo({
        url: "/pages/home/person/myWallet/billList/index"
    })
}

// 确认充值
let payBox = ref()
const confirmRecharge = async () => {
    let { payWayType, topUpPrice } = state
    let params = {
        "PaySource": 1,
        "orderDesc": "金币充值",
        "itemType": 0,
        "userId": getAuthorization("userId"),
        "TreadType": 4,
        "priceId": topUpPrice.ID,
        "order_Money": topUpPrice.Money,
        "num": 1,
        "orderType": 0,
        "payWay": payWayType.payWay,
        "payPage": "我的钱包"
    }
    console.log(params, 'state')
    try {
        state.isLoading = true
        let data = await proxy.$post(PayCurOrder, params)
        state.isLoading = false
        if (data.code == 200) {
            let {outTradeNo, paymentId} = data.data
            setAuthorization('payOrderData', data.data)
            state.paymentResult = data.data
            var resData = data.data.contentMap
            document.getElementById('payMent').innerHTML = resData;
            let _value = document.getElementById('biz_content').value;
            let _value_sign = document.getElementById('sign').value;
            let _after_value = decodeURIComponent(_value);
            let _after_sign_value = decodeURIComponent(_value_sign);
            document.getElementById('biz_content').value = _after_value// _after_value
            document.getElementById('sign').value = _after_sign_value;
            document.forms[0].setAttribute('target', '_self') // 当前窗口跳转
            document.forms['payform'].submit();
            document.getElementById('payMent').innerHTML = ""
        }
    } catch (error) {
        state.isLoading = false
        showToast(error.message)
    }
}

// 客服聊天
const privateChatFn = () => {
    uni.navigateTo({
        url: '/pages/privateChat/index?userIMId='+ 215
    })
}

</script>

<style lang="scss" scoped>
.my-wallet-box {
    position: relative;
}

.van-nav-bar {
    background: none;
    border: none;
}

.my-wallet-head-main {
    position: absolute;
    top: 0;

    img {
        width: 100%;
    }

    .wallet-price {
        color: #fff;
        display: flex;
        align-items: flex-end;
        position: absolute;
        top: 200rpx;
        padding: 0 30rpx;
        font-size: 60rpx;

        img {
            width: 48rpx;
            height: 48rpx;
        }

        text {
            margin-left: 10rpx;
            line-height: 1;

            ::after {
                content: "金币";
                font-size: 32rpx;
                margin-left: 10rpx;
            }
        }

    }
}

.my-wallet-head-bottom {
    color: #fff;
    display: flex;
    align-items: center;
    height: 24rpx;
    line-height: 24rpx;
    position: absolute;
    top: 310rpx;
    font-size: 24rpx;
    margin-left: 30rpx;

    img {
        width: 24rpx;
        height: 24rpx;
    }
}

.my-wallet-head-main-bottom {
    position: relative;
    z-index: 22;
    padding: 30rpx;
    border-radius: 15rpx;
    margin-top: -20rpx;
    background-color: #fff;
}

.pay-btn-bottom {
    padding:0 30rpx
    // position: fixed;
    // bottom: 30rpx;
    // left: 30rpx;
    // right: 30rpx;
}

.van-button {
    line-height: 100rpx;
    height: 100rpx;
    font-size: 32rpx;
    width: 100%;
    margin-top: 15rpx;
}
#alipay{
    height: 0;
    overflow: hidden;
}
:deep(.van-nav-bar__content){
    border:none;
}
</style>
